@import "header";
@import "footer";
body{
  background-color: #000;
  color: #fff;
}
main{
  margin-top: 45px;
  .hero{
    background-image: url('../images/3060tiHero.jpg');
    height: 770px;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    .inner{
      height: 100%;
      display: grid;
      place-items: center;
      justify-items: start;
      .heroText{
        width: 50%;
        font-family: "geforce-bold", sans-serif;
        .heroTitle{
          font-size: 40px;
          font-weight: bold;
          color: #76B900;
        }
        .heroSmallTitle{
          font-size: 30px;
          margin-top: 10px;
          margin-bottom: 10px;
        }
        .heroContent{
          font-size: 23px;
          line-height: 30px;
        }
        .heroPrice{
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 18px;
        }
        .buyBtn{
          width: 100px;
          height: 42px;
          background-color: #76B900;
          display: grid;
          place-items: center;
          transition: 1s ease-in-out;
          cursor: pointer;
          &:hover{
            background-color: #76D300;
          }
        }
      }
    }
  }
  .tabs{
    .inner{
      display: flex;
      & > *{
        transition: 0.3s;
        padding-top: 15px;
        padding-bottom: 15px;
        flex-basis: 11%;
        cursor: pointer;
        background-color: #76B900;
        display: grid;
        place-items: center;
        margin-left: 5px;
        margin-right: 5px;
      }
    }
    .border{
      border-bottom: 1px solid #76b900;
    }
  }
  .contents{
    .introduction{
      text-align: center;
    }
    .detail{
      text-align: center;
      .tableTitle{
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 30px;
      }
      table{
        margin: 0 auto;
        font-family: geforce-bold, sans-serif;
        tr{
          border-bottom: 1px solid #4f4f4f;
          td{
            padding: 15px;
            font-size: 20px;
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 768px){
  main{
    .tabs{
      .inner{
        & > *{
          flex: 1;
        }
      }
    }
    .contents{
      .introduction{
        img{
          width: 100%;
        }
      }
    }
    .hero{
      background-image: url('../images/3060tiHero770px.jpg');
      .inner{
        padding-top: 50px;
        place-items: start;
        .heroText{
          width: 90%;
        }
      }
    }
  }
}